<template>
  <div class="nav" ref="nav" :style="{'width':navWidth+'rem'}">
    <!--:style="{'width':itemWidth+'px'}"-->
    <div class="nav-item"
         ref="navItem" @click="navItemClick(index,item.id)"
         :class="{'current':index==goodCatId}"

         v-for="(item,index) in navList"><span>
      {{item.cateName}}
    </span></div>
  </div>

</template>
<script>
  export default{
      props:{
        navList:{
          type:Array,
          default:[]
        },
        itemWidth:{
          type:Number
        },
        goodCatId:{
          type:Number,
          default:0
        }
      },
      data(){
        return{
          navWidth:'',
          windowWidth:'',
          maxSildeWidth:'',
          slideWidth:'',
        }
      },
    computed:{
        currentIndex(){
          return this.goodCatId
        }
    },
    watch:{
      navList(val){
        //this.navWidth=this.itemWidth*val.length;
        this.navWidth=17;
        this.maxSildeWidth = this.itemWidth*(this.navList.length - 4);
        this.windowWidth=document.body.clientWidth*0.9;
      },
      goodCatId(val){
        this.slideWidth = -this.itemWidth*val + this.windowWidth*(0.9)/2;
        //设置区间值
        if(this.slideWidth > 0){
          this.slideWidth = 0;
        }else if(this.slideWidth < -this.maxSildeWidth){
          this.slideWidth = -this.maxSildeWidth;
        }
        this.$refs.nav.style.transition='all 500ms'
        this.$refs.nav.style.transform=`translateX(${this.slideWidth}px) scale(1) translateZ(0px)`
      }
    },
    mounted(){

    },
    methods:{
      navItemClick(index,id){
        //this.goodCatId=index;
        this.$emit('nav-item-click',index,id);
      },
    }
  }
</script>
<style lang="less" scoped>
  .nav {
    height:.64rem;
    position: relative;
    line-height: 0.64rem;
  }
  .nav-item {
    display:inline-block;
    float: left;
    text-align: center;
    font-size:.26rem;
    padding:0 0.16rem 0.05rem;
    span{
      display: inline-block;
      width: 100%;
    }
    &.current{
      span{
         width: 100%;
        border-bottom:2px solid #fff;
      }

    }
  }
  .nav:first-child {
    margin-left: 0;
  }
</style>
